<template>
  <div class="music-library">
    <!-- 下部容器 -->
    <div class="bottom-container">
      <!-- 左容器 -->
      <div class="left-container">
        <el-row gutter="30" style="width:100%">
          <el-col v-for="(music, index) in musics" :key="index" :span="6" class="music-item">
            <el-card  class="song-card" style="max-width: 280px">
              <img :src="'http://localhost:8080/images/upload/' + music.cover_image" alt="music Cover" class="music-cover"
                @click="goToPlayer(music)" />
               <h4>{{'曲名  :  '+music.music_name }}</h4>
               <h4>{{'类型  :  '+music.type }}</h4>


                <div class="artist-info">
                  <span>{{ '歌手:  ' + music.artist }}</span> 
                  <el-button 
                    type="text" 
                    icon="el-icon-play" 
                     @click="goToPlayer(music)" 
                    class="play-button" >
                    <el-icon class="custom-icon"><VideoPlay /></el-icon>
                </el-button>
                </div>
       
            
            </el-card>
          </el-col>
        </el-row>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
      
      <!-- 右容器 -->
      <div class="right-container">
        <!-- 搜索卡片 -->
        <el-row gutter="30" class="button-row">
          <el-col :span="12">
            <el-input 
              v-model="searchmanname" 
              placeholder="输入歌手姓名进行查询" 
              class="search-input" 
            />
          </el-col>
        </el-row>
        <br>
        <el-row gutter="30" class="button-row">
          <el-col :span="12">
            <el-input 
              v-model="searchname" 
              placeholder="输入歌曲名称进行查询" 
              class="search-input" 
            />
          </el-col>
        </el-row>
        <br>
        <el-row gutter="30" class="button-row">
          <el-col :span="12">
            <el-select 
              class="search-input" 
              v-model="searchtype" 
              placeholder="选择歌曲类型" 
              @change="searchMusic"
            >
              <el-option label="所有歌曲类型" value=""></el-option>
              <el-option label="新国风流行" value="新国风流行"></el-option>
              <el-option label="传统音乐" value="传统音乐"></el-option>
              <el-option label="戏曲融合" value="戏曲融合"></el-option>
              <el-option label="主题文化" value="主题文化"></el-option>
              <el-option label="地域特色" value="地域特色"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <br>
        <el-row gutter="30" class="button-row">
          <el-col :span="12">
            <el-button type="danger" round @click="searchMusic">查询</el-button>
          </el-col>
        </el-row>
        <br>
        <!-- 饼状图部分 -->
        <section class="charts-container">
          <div class="chart">
            <!-- <h3 class="chart-title">你的听歌偏好</h3> -->
            <div ref="chart1" class="chart-area"></div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";

export default {
  data() {
    return {
      searchname: '',
      searchmanname: '',
      searchtype: '',
      musics: [], // 歌曲数据
      songs: [], // 歌曲排行榜数据
      isSearching: false,
      userId: '',
      currentPage: 1, // 当前页码
      pageSize: 8, // 每页显示的条目数
      totalItems: 0, // 总条目数
      viewMode: 'library', // 'library' 或 'collection'
      charts: {
        chart1: null,
      },
      musicTypeCounts: {}, // 用于存储歌曲类型的计数
    };
  },

  mounted() {
    this.userId = sessionStorage.getItem('user_id') || localStorage.getItem('user_id');
    console.log("User ID:", this.userId); // 输出用户 ID
    this.fetchMusicTypeCounts();
  },

  methods: {
    playAll() {
      const musicIds = this.top10Musics.map(song => song.music_id);
      sessionStorage.setItem('musicIds', JSON.stringify(musicIds));
      this.$router.push({ name: 'Player' });
    },

    getCollectionMusic(userId) {
      this.viewMode = 'collection';
      console.log('Fetching collection music for user ID:', userId);
      let params = `user_id=${userId}&page=${this.currentPage}&size=${this.pageSize}`;
      if (this.searchname) {
        params += `&music_name=${encodeURIComponent(this.searchname)}`;
      }
      if (this.searchmanname) {
        params += `&artist=${encodeURIComponent(this.searchmanname)}`;
      }
      if (this.searchtype) {
        params += `&type=${encodeURIComponent(this.searchtype)}`;
      }

      console.log('Request URL with parameters:', `http://localhost:8080/mc/g1?${params}`);

      fetch(`http://localhost:8080/mc/g1?${params}`)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          console.log('Fetched data:', data);
          this.musics = data.list; // 更新音乐列表
          this.totalItems = data.total; // 更新总条目数
        })
        .catch(error => {
          console.error('Error fetching songs:', error);
        });
    },

    goToPlayer(music) {
      console.log(music.music_id);
      sessionStorage.setItem('music_id', music.music_id);
      this.$router.push({ name: 'Player' }, music);
    },

    searchMusic() {
      this.currentPage = 1; // 重置为第一页
      this.getCollectionMusic(this.userId); // 如果当前是收藏视图，查询收藏的歌曲
    },

    fetchMusicTypeCounts() {
      const user_id = this.userId;
      axios.get(`http://localhost:8080/mc/types/count`, { params: { user_id: user_id } })
        .then(response => {
          this.musicTypeCounts = response.data;
          this.initCharts();
        })
        .catch(error => {
          console.error("获取歌曲种类数量失败", error);
          ElMessage.error("获取歌曲种类数量失败，请检查网络连接或联系管理员。");
        });
    },

    handlePageChange(page) {
      console.log("Changing page to:", page); // 调试输出
      this.currentPage = page;
      this.getCollectionMusic(this.userId);
    },

    initCharts() {
      if (!this.$refs.chart1 || !this.musicTypeCounts || Object.keys(this.musicTypeCounts).length === 0) return;
      this.charts.chart1 = echarts.init(this.$refs.chart1);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          top: 'bottom',
        },
        series: [
          {
            name: '歌曲类别',
            type: 'pie',
            radius: '55%',
            data: Object.keys(this.musicTypeCounts).map(key => ({
              value: this.musicTypeCounts[key],
              name: key,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      this.charts.chart1.setOption(option);
    },
  },

  created() {
    this.userId = sessionStorage.getItem('user_id') || localStorage.getItem('user_id');
    console.log("User ID:", this.userId); // 输出用户 ID
    this.getCollectionMusic(this.userId);
  },
};
</script> 


<style scoped>

.song-card {
  transition: background-color 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  text-align: center; /* 确保文本在卡片中居中 */
  padding: 0px; /* 可以根据需要添加内边距 */
  /* 初始状态的样式 */
}

.song-card:hover {
  background-color: #f5f7fa; /* 悬停时的背景颜色 */
  cursor: pointer; /* 悬停时的鼠标指针 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
  transform: translateY(-15px); /* 提升卡片位置，创建浮动效果 */
}
.search-card {
  text-align: left; /* 确保文本内容左对齐 */
}

/* 按钮样式 */
.button-row .el-button {
  margin: 50px; /* 按钮之间的间距 */
  padding: 5px 5px; /* 增加按钮的内边距 */
  font-size: 10px; /* 增大按钮的字体大小 */
  background-color: #f9f4e8;
  color: #4b3f33;
}

.search-input {
  width: 200px; /* 设置搜索框宽度为300px */
  height: 32px; /* 设置搜索框高度为50px */
  border: 1px solid #050406bf; /* 设置边框颜色 */
  border-radius: 4px; /* 设置边框圆角 */
  padding: 0; /* 设置内边距 */
  font-size: 16px; /* 设置字体大小 */
  transition: border-color 0.3s; /* 设置边框颜色变化的过渡效果 */
}

.search-input:focus {
  border-color: #66b1ff; /* 获取焦点时改变边框颜色 */
  outline: none; /* 去掉默认的轮廓 */
}

.music-library {
  padding: 20px; /* 主容器内边距 */
  margin-left: 50px;  /* 左边距 */
  margin-right: 50px; /* 右边距 */
}
.el-select__wrapper {
   
    min-height: 50px;
    width: 300px; /* 设置搜索框宽度为300px */
  height: 50px; /* 设置搜索框高度为50px */
}
.container {
  height: 30%;
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 20px; /* 下边距 */
}

.search-input {
  width: 200px; /* 设置搜索框宽度为300px */
  height: 32px; /* 设置搜索框高度为50px */
  border: 0px solid #eae6edbf; /* 设置边框颜色 */
  border-radius: 4px; /* 设置边框圆角 */
  padding: 20; /* 设置内边距 */
  font-size: 14px; /* 设置字体大小 */
  transition: border-color 0.3s; /* 设置边框颜色变化的过渡效果 */
}

.search-input:focus {
  border-color: #66b1ff; /* 获取焦点时改变边框颜色 */
  outline: none; /* 去掉默认的轮廓 */
}

.button-row .el-button {
  margin: 10px; /* 按钮之间的间距 */
  padding: 10px 20px; /* 增加按钮的内边距 (上下左右) */
  font-size: 14px; /* 增大按钮的字体大小 */
  background-color: #f9f4e8;
  color: #4b3f33;
}
.bottom-container {  
  display: flex; /* 使用 Flexbox 布局 */  
  height: 70%; /* 下部容器的高度 */  
  margin-top: 0px; /* 增加与上部容器的垂直间距 */  
}   
.left-container {  
  flex: 0 0 75%; /* 左侧容器占75%宽度 */  
  height: 100%; /* 使容器高度充满下部容器 */  
  display: flex; /* 使用flex布局 */  
  flex-wrap: wrap; /* 允许换行，以适应内容 */  
  align-items: flex-start; /* 垂直对齐顶部 */  
  
  padding: 20px; /* 可以添加内边距 */  
  border-right: 3px solid #e0e0e0; /* 可选：添加右边框以区分左右容器 */  
}  

.right-container {  
  padding: 100px; /* TOP10 容器的内边距 */
  text-align: left; /* 确保文本内容左对齐 */
  flex: 0 0 20%; /* 右边容器占25%的宽度 */  
  overflow-y: auto; /* 如果内容超出，允许滚动 */  
} 

.music-list {
  
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(4, 1fr); /* 定义4列 */
  gap: 100px; /* 设置网格间距 */
}
.music-item {
  width: calc(25% - 30px); /* 每个音乐项宽度为25%（4个一行），减去30px的边距 */
  margin-bottom: 30px; /* 设置底部间距 */
  box-sizing: border-box; /* 让边框和内边距包含在总宽度内 */
  /* margin-bottom: 20px; 分 music-item 之间的间距 */
  display: flex;
  justify-content: center;
  height: 300px; /* 设置每个小容器的高度 */
  box-sizing: border-box; /* 防止边距影响整体宽度 */
}

.music-cover {
  width: 150px; /* 专辑封面图片宽度 */
  height: 150px; /* 专辑封面图片高度 */
  object-fit: cover; /* 图片自适应容器 */
 
  
}

.music-info {

  text-align: center; /* 音乐信息文本居中 */
  padding: 10px 0; /* 设置上下填充 */
}

.charts-container {
  padding: 20px;
  font-family: 'KaiTi';

}

.chart {
  text-align: center;
}

.chart-area {
  height: 300px;
}

</style>

<!-- //设置图标样式 -->
<style scoped>
.custom-icon {
  font-size: 36px; /* 设置图标大小 */
  color: #030f04db; /* 设置图标颜色 */
  transition: color 0.3s; /* 添加过渡效果 */
}

.play-button:hover .custom-icon {
  color: #66bb6a; /* 悬停时改变颜色 */
}
</style>

